<template>
  <view class="implement">
    <view v-for="item in list" :key="item.id" class="implement-list" @click="implementInfo(item)">
      <view class="implement-list-left">
        <view class="implement-list-left-title">
          {{ item.cEnterpriseName }}
        </view>
        <view v-if="Number(item.status) === 2" class="implement-list-left-time">
          完成时间: {{ item.completeTime }}
        </view>
      </view>
      <view v-if="Number(item.status) === 4" class="implement-list-news" />
      <!-- <view class="implement-list-status"><u-image mode="widthFix" :src="item.status | taskStatus" /></view> -->
      <view class="implement-list-status"><u-image mode="widthFix" :src="taskStatusImg(item.status)" /></view>
      <!-- <view :class="['implement-list-status', Number(item.status) === 1 ? 'blue' : Number(item.status === 2) ? 'green' : Number(item.status === 3) ? 'red' : 'orange']">{{ item.status | taskStatus }}</view> -->
      <view class="implement-list-img">
        <u-image width="100%" height="14px" src="../../../../static/img/task/open.png" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // filters: {
  //   taskStatus(status) {
  //     // if (Number(status) === 1) {
  //     //   return require('@/static/img/task/status1.png');
  //     // } else if (Number(status) === 2) {
  //     //   return require('@/static/img/task/status2.png');
  //     // } else if (Number(status) === 3) {
  //     //   return require('@/static/img/task/status3.png');
  //     // } else if (Number(status) === 4) {
  //     //   return require('@/static/img/task/status4.png');
  //     // } else {
  //     //   return require('@/static/img/task/status4.png');
  //     // }
  //     if (Number(status) === 1) {
  //       return this.status1;
  //     } else if (Number(status) === 2) {
  //       return this.status2;
  //     } else if (Number(status) === 3) {
  //       return this.status3;
  //     } else if (Number(status) === 4) {
  //       return this.status4;
  //     } else {
  //       return this.status4;
  //     }
  //   }
  // },
  data() {
    return {
      list: [],
      status0: require('@/static/img/task/status0.png'),
      status1: require('@/static/img/task/status1.png'),
      status2: require('@/static/img/task/status2.png'),
      status3: require('@/static/img/task/status3.png'),
      status4: require('@/static/img/task/status4.png'),
      guid: ''
    };
  },
  computed: {
    taskStatusImg() {
      return (status) => {
        if (Number(status) === 1 || Number(status) === 5) {
          return this.status1;
        } else if (Number(status) === 2) {
          return this.status2;
        } else if (Number(status) === 3) {
          return this.status3;
        } else if (Number(status) === 4) {
          return this.status4;
        } else if (Number(status) === 0) {
          return this.status0;
        }
      };
    }
  },
  created() {
    const { details, guid } = this.$store.state.task.resData;
    this.list = details;
    this.guid = guid;
  },
  methods: {
    implementInfo(obj) {
      this.$router.replace({
        path: '/taskdetail/implement/info',
        query: {
          cEnterpriseName: obj.cEnterpriseName,
          status: obj.status,
          completeTime: obj.completeTime,
          // enterpriseGuid: obj.enterpriseGuid,
          detailTaskGuid: obj.detailTaskGuid,
          taskGuid: this.guid,
          cEnterpriseCode: obj.cEnterpriseCode
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .implement{
    .implement-list{
      display: flex;
      background-color: #fff;
      border-bottom: 1px solid rgba(182,185,191,0.2);
      align-items: center;
      height: 73px;
      .implement-list-left{
        flex: 1;
        padding-left: 10px;
        padding-right: 10px;
        .implement-list-left-title{
          font-size: 17px;
          font-weight: 600;
          color: #303133;
        }
        .implement-list-left-time{
          color: #b6b9bf;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          padding-top: 5px;
        }
      }
      .implement-list-news{
        width: 10px;
        height: 10px;
        background-color: #ff654d;
        border-radius: 50%;
        margin: 8px;
      }
      .implement-list-status{
        width: 53px;
        height: 22px;
        text-align: center;
        color: #fff;
        border-radius: 10px;
        font-size: 15px;
      }
      // .blue{
      //   background-color: #4FACFF;
      // }
      // .red {
      //   background-color: #FF8168;
      // }
      // .green {
      //   background-color: #2AD28C;
      // }
      // .orange {
      //   background-color: #FFB100;
      // }
      .implement-list-img{
        width: 8px;
        height: 73px;
        line-height: 76px;
        margin-left: 8px;
        margin-right: 12px;
      }
    }
  }
</style>
